<template>
  <div class="middle">
    <div class="middlebg"></div>
    <el-card class="box-card" v-loading.lock="loading">
      <el-tabs type="card">
        <div>
          <span slot="label" class="title1" @click="constitution">数据统计</span>
          <span slot="label" class="title1 planTitle" @click="student">学生数据</span>
          <span slot="label" class="title1" @click="importData">数据导入</span>
        </div>
      </el-tabs>
      <div class="list">
        <div class="title">
          <h5>统计范围:</h5>
          <span>{{section}}</span>
          <span>{{gradeName}}</span>
        </div>
        <div class="search">
          <el-select class="select" v-model="classId" placeholder="班级" size="small" clearable>
            <el-option v-for="item in classInfo" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-input class="ipt" placeholder="姓名" v-model="name" clearable size="small"></el-input>
          <el-input class="ipt" placeholder="学籍号" v-model="stu_num" clearable size="small"></el-input>
          <el-button class="btn" type="danger" size="small" @click="search">搜索</el-button>
        </div>
      </div>
      <div class="surface">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="姓名" width="100" align="center" fixed></el-table-column>
          <el-table-column prop="height_info" label="身高" width="80" align="center"></el-table-column>
          <el-table-column prop="weight_info" label="体重" width="80" align="center"></el-table-column>
          <el-table-column prop="b_m_i_info" label="BMI" width="60" align="center"></el-table-column>
          <el-table-column prop="vital_capacity_info" label="肺活量" width="80" align="center"></el-table-column>
          <el-table-column prop="sitting_forward_bending_info" label="坐位体前屈" width="100" align="center"></el-table-column>
          <el-table-column prop="rope_skipping_info" label="一分钟跳绳" width="100" align="center"></el-table-column>
          <el-table-column prop="abdominal_curl_info" label="一分钟仰卧起坐" width="130" align="center"></el-table-column>
          <el-table-column prop="fifty_m_info" label="50米跑" width="80" align="center"></el-table-column>
          <el-table-column prop="fifty_eight_info" label="50*8往返跑" width="100" align="center"></el-table-column>
          <el-table-column prop="standing_long_jump_info" label="立定跳远" width="80" align="center"></el-table-column>
          <el-table-column prop="one_thousand_m_info" label="1000米跑" width="100" align="center"></el-table-column>
          <el-table-column prop="eight_hundred_m_info" label="800米跑" width="100" align="center"></el-table-column>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button @click="watch(scope.row.id)" type="primary" plain size="mini">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <el-pagination
        class="fenye"
        @size-change="SizeChange"
        @current-change="currentChange"
        :current-page="page"
        :page-sizes="pagesizes"
        :page-size="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <!--弹出层-->
      <el-dialog title="学生数据" :visible.sync="show">
        <div>
          <table v-model="studentData">
            <tr>
              <td><h5>姓名</h5> <span>{{studentData.name}}</span></td>
              <td><h5>学籍号</h5><span>{{studentData.stu_no}}</span></td>
            </tr>
            <tr>
              <td><h5>性别</h5> <span  v-if ="studentData.sex == 1?true:false">男</span><span  v-else ="studentData.sex == 0?true:false">女</span></td>
              <td><h5>班级</h5> <span>{{studentData.className}}</span></td>
            </tr>
            <tr>
              <td><h5>年龄</h5> <span>{{studentData.stu_age}}</span></td>
              <td><h5>档案日期</h5> <span>{{studentData.time}}</span></td>
            </tr>
          </table>
          <div class="score">
            <p>{{studentData.total}}</p>
            <span>综合评分</span>
          </div>
          <div class="pic" ref="chart" :style="{width: '96%', height: '280px'}"></div>
        </div>

      </el-dialog>
    </el-card>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        cur: 0,//默认选中第一个tab
        rows: 6,//每页几条
        page: 1,//当前显示页数
        pagesizes: [6, 12, 18, 24],//更改每页显示条数
        total: 20,//一共多少条,
        classInfo: [],
        classId: '',
        name: '',
        stu_num: '',
        tableData: [],
        identifying:'',
        schoolYearId:'',
        gradeId:'',
        section:'',
        gradeName:'',
        show: false,
        loading:true,
        studentData :[],
        echartsData:[],

    }
    },

    methods: {
      //数据统计
      constitution () {
        this.$router.push({name: 'constitution'})
      },
      //学生数据
      student () {
        this.$router.push({name: 'stu_data'})
      },
      //导入数据
      importData () {
        this.$router.push({name: 'data_import'})
      },
      //获取地址栏的id
      getID () {
        this.identifying = this.$route.query.identifying
        this.schoolYearId = this.$route.query.schoolYearId
        this.gradeId = this.$route.query.gradeId
        this.gradeName = this.$route.query.gradeName
        this.section = this.$route.query.section
      },
      getClassInfo(){
        this.$http.post('/api/constitution/getClassInfo',{
          gradeId:this.gradeId
        }).then(res=>{
          this.classInfo = res.data.data
        })
      },
      getGradeData(){
        this.$http.post('/api/constitution/sports',{
          identifying:this.identifying,
          schoolYearId:this.schoolYearId,
          gradeId:this.gradeId,
          page:this.page,
          rows:this.rows,
          name:this.name,
          stu_no:this.stu_num,
          classId:this.classId
        }).then(res=>{
          this.tableData = res.data.data
          this.total = res.data.total
          this.loading = false
        })
      },
      //每页显示条数
      SizeChange (val) {
        this.rows = val
        this.getGradeData()
        this.search()
      },
      //切换第几页
      currentChange (val) {
        this.page = val
        this.getGradeData()
        this.search()
      },
      search(){
        this.getGradeData()
      },
      //查看个人信息
      watch (id) {
        this.show = true
        this.$http.post('/api/constitution/performance',{
          id:id
        }).then(res=>{
          this.studentData = res.data.data
          this.echartsData = res.data.result

          this.drawLine();
        })
        this.$nextTick(() => {
          //  执行echarts方法
          this.drawLine()
        })
      },
      //总体
      drawLine () {
        // 基于准备好的dom，初始化echarts实例
        let bar_dv = this.$refs.chart
        let myChart = this.$echarts.init(bar_dv)
        //绘制图表
        myChart.setOption({
          tooltip: {},
          legend: {
            data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
          },
          radar: {
            // shape: 'circle',
            name: {
              textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
              }
            },
            indicator: [
              {name: 'BMI', max: 100},
              {name: '肺活量', max: 100},
              {name: '耐力', max: 100},
              {name: '柔韧和力量', max: 100},
              {name: '速度', max: 100},



            ]
          },
          series: [{
            name: '体质数据得分',
            type: 'radar',
            data: [
              this.echartsData
            ]
          }]
        })

      },
    },
    mounted () {
      window.addEventListener('bar_dv', this.drawLine, 20)
    },
    created () {
      this.getID()
      this.getGradeData()
      this.getClassInfo()
    },
    destroyed () {
      window.removeEventListener('bar_dv', this.drawLine, 20)
    },
  }
</script>
<style lang="less" scoped>
  .middle {
    height: 98%;
    width: 96%;
    background: repeat center top;
    background-size: contain;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    .middlebg {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background: url(../../assets/image/bg-img.png) no-repeat center;
      background-size: 100%;

    }
    /deep/ .el-card__body {
      padding: 0;
      padding-bottom: 20px;
    }
    .title1 {
      display: inline-block;
      padding: 0 10px;
      margin-bottom: 20px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      &:hover {
        background: #00b02d;
        color: #fff;
      }
    }
    .planTitle {
      color: #fff;
      background: #00B02D;
    }
    .list {
      padding: 0 30px 50px 30px;
      .title {
        display: inline-block;
        float: left;
        h5 {
          display: inline-block;
          font-size: 16px;
        }
        span {
          padding: 0 10px;
        }
      }
      .search {
        float: right;
        display: inline-block;
        .select, .ipt, .btn {
          display: inline-block;
        }
        .ipt {
          width: 200px;
        }
      }
    }
    .fenye {
      margin-top: 20px;
      margin-bottom: 20px;
      text-align: center;
    }
    table {
      width: 400px;
      display: inline-block;
      padding-bottom: 20px;
      tr {
        td {
          width: 220px;
          height: 30px;
          line-height: 30px;
          h5 {
            display: inline-block;
            font-size: 14px;
            font-weight: normal;
            color: #000;
            width: 60px;
          }
          span {
            color: #666666;
            padding-right: 10px;
          }
        }
      }

    }
    .score {
      display: inline-block;
      width: 200px;
      float: right;
      p {
        color: #00b02d;
        font-size: 50px;
      }
    }

  }
</style>

